<template>
  <div class="change-log-container no-background-container">
    <el-row :gutter="20">
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <el-card
          :body-style="{
            height: 'calc(var(--el-container-height) - 57px)',
          }"
        >
          <template #header>
            <!-- <vab-icon icon="file-word-line" /> -->
            更新日志
          </template>
          <el-scrollbar style="height: 100%">
            <el-timeline :reverse="reverse" style="margin-top: 5px">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :color="activity.color"
                :timestamp="activity.timestamp"
              >
                <div class="change-log-item" v-html="activity.content"></div>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  import dayjs from "dayjs";
  import logJson from "./components/log.json";

  const lastTime = dayjs().format("YYYY-MM-DD");
  const reverse = ref(false);
  const commonUrl = `https://vue-admin-beautiful.com`;
  const activities = ref([]);

  const sortLogs = (logs) => {
    return logs.sort((a, b) => {
      const d1 = new Date(a.timestamp);
      const d2 = new Date(b.timestamp);

      if (d1 < d2) {
        return 1;
      } else if (d1 > d2) {
        return -1;
      } else {
        return 0;
      }
    });
  };

  onBeforeMount(async () => {
    const data = logJson;
    data.push({
      timestamp: lastTime,
      content: `
      温馨提示：
      <br />
      小版本更新日志及bug修复日志演示地址不做展示，具体更新内容以购买者绑定仓库提交日志为准
      <a href='https://www.baidu.com' target='_blank'>点我跳转</a>
      `,
    });
    activities.value = sortLogs(data);
  });
</script>

<style lang="scss" scoped>
  .change-log-container {
    .change-log-item {
      line-height: 24px;
    }
  }
</style>
